<template>
  <div class="app-container">
      <h2 style="text-align:center;">发布新课程</h2>

        <el-steps :active="active" process-status="process" align-center   finish-status="success">
            <el-step title="填写课程基本信息"></el-step>
            <el-step title="填写课程大纲"></el-step>
            <el-step title="发布课程"></el-step>
        </el-steps>

        <!--添加章节按钮 -->
        <el-button type="primary" size="small" @click="openDoglogForm()">添加章节</el-button>

        <!-- 添加章节Form -->
        <el-dialog :title="this.chapter.title==''?'添加章节':'编辑章节'" :visible.sync="dialogFormVisible">
          <el-form :model="chapter">
            <el-form-item label="章节标题" :label-width="formLabelWidth">
              <el-input v-model="chapter.title" ></el-input>
            </el-form-item>
            <el-form-item label="章节排序" :label-width="formLabelWidth">
              <el-input-number v-model="chapter.sort" :min="0" controls-position="right" placeholder=""></el-input-number>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 添加小节orm -->
        <el-dialog :title="this.video.title==''?'添加小节':'编辑小节'" :visible.sync="diaVideoFormVisible">
          <el-form :model="video">
            <el-form-item label="小节标题" :label-width="formLabelWidth">
              <el-input v-model="video.title" ></el-input>
            </el-form-item>
            <el-form-item label="小节排序" :label-width="formLabelWidth">
              <el-input-number v-model="video.sort" :min="0" controls-position="right" placeholder=""></el-input-number>
            </el-form-item>
            <el-form-item label="是否免费" :label-width="formLabelWidth">
              <el-radio-group v-model="video.isFree">
                <el-radio :label="true">免费</el-radio>
                <el-radio :label="false">付费</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="上传视频" :label-width="formLabelWidth">
              <el-upload
                :on-success="handleVodUploadSuccess"
                :on-remove="handleVodRemove"
                :before-remove="beforeVodRemove"
                :on-exceed="handleUploadExceed"
                :file-list="fileList"
                :action="BASE_API+'/vodService/video/uploadVideo'"
                :limit="1"
                class="upload-demo">
                <el-button size="small" type="primary">上传视频</el-button>
                <el-tooltip placement="right-end">
                  <div slot="content">最大支持1G，<br>
                  支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                  GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                  MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                  SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </el-upload>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="diaVideoFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveOrUpdateVideo()">确 定</el-button>
          </div>
        </el-dialog>

        <!--课程大纲-->
        <ul class="chanpterList">
          <li v-for="chapter in chapterList" :key="chapter.id">
            <p>
              {{chapter.title}}

              <span class="acts">
                <el-button @click="openVideoForm(chapter.id)" type="primary" icon="el-icon-plus" circle  title="添加小节"/>
                
                <el-button @click="editChapter(chapter.id)" type="primary" icon="el-icon-edit" circle  title="编辑章节"/>

                <el-button @click="removeChapter(chapter.id)"  type="danger" icon="el-icon-delete" circle title="删除章节"/>
              </span>
              

            </p> 

              <ul class="chanpterList videoList">
                <li v-for="video in chapter.children" :key="video.id">
                  <p>
                    {{video.title}}

                    <span style="acts">
                      <el-button size="mini" @click="editVideo(video.id)" type="primary" icon="el-icon-edit" circle  title="编辑小节"/>

                      <el-button size="mini" @click="removeVideo(video.id)"  type="danger" icon="el-icon-delete" circle title="删除小节"/>
                
                    </span>
                  </p>
                </li>
              </ul>
          </li>
        </ul>

        <el-form label-width="120px">
          <el-form-item>
              <el-button @click="previous">上一步</el-button>
              <el-button @click="next" type="primary" :disabled="saveBtnDisables">保存并下一步</el-button>
          </el-form-item>
        </el-form>
        
  </div>
</template>

<script>
import courseChapter from '@/api/chapter/chapter.js'
import courseVideo from '@/api/chapter/video.js'


  export default {
    data() {
      return {
        active: 1,
        saveBtnDisables:false,
        chapterList:[],
        courseId:'',
        dialogFormVisible:false,
        chapter:{//存储章节数据
          title:'',
          sort:'',
          courseId:''
        },
        formLabelWidth:'120px',
        diaVideoFormVisible:false,
        video:{
          title:'',
          sort:0,
          isFree:0,
          videoSourceId:'',
          videoOriginalName:''
        },
        fileList:[],
        BASE_API:process.env.BASE_API
      };
    },
    created(){
      //获取路由id
      if(this.$route.params && this.$route.params.id){
          this.courseId = this.$route.params.id
          this.getChapter(this.courseId)
      }
      
    },

    methods: {
      //删除视频
      handleVodRemove(){
        courseVideo.deleteVideo(this.video.videoSourceId)
          .then(response =>{
            //提示信息
            this.$message({
                        type: 'success',
                        message: '删除视频成功!'
            });
            //清空文件列表
            this.fileList = []
            //清空视频id和视频名称
            this.video.videoSourceId = '' 
            this.video.videoOriginalName = ''
          })
      },

      //删除视频前
      beforeVodRemove(file,fileList){
        return this.$confirm(`确定移除 ${ file.name }?`)
      },

      //上传视频成功
      handleVodUploadSuccess(response,file,fileList){
        this.video.videoSourceId = response.data.videoId
        this.video.videoOriginalName = file.name
      },

      //上传视频之前
      handleUploadExceed(){
        this.$message.warning('重新上传视频，请先删除已上传的视频')
      },

      next() {
          //跳转到第三步
          this.$router.push({path:'/course/issue/'+this.courseId})
          
        if (this.active++ > 2) this.active = 0;
      },
      previous(){
        //跳转到第一步
        this.$router.push({path:'/course/courseInfo/'+this.courseId})
      },

      //==================================章节操作=======================================
      //根据课程id查询
      getChapter(id){
        courseChapter.getChapter(id)
          .then(response =>{
            this.chapterList = response.data.Chapter
          })
      },

      //保存或者更新
      saveOrUpdate(){
        if(!this.chapter.courseId){
          this.addChapter()
        }else{
          this.updateChapter()
        }
        
      },
      //修改章节
      updateChapter(){
        courseChapter.updateChapter(this.chapter)
          .then(response =>{
            //关闭弹框
            this.dialogFormVisible = false

            //提示信息
            this.$message({
                        type: 'success',
                        message: '修改章节信息成功!'
            });

            //刷新页面
            this.getChapter(this.courseId)
          })
      },


      //添加章节
      addChapter(){
        //添加课程id
        this.chapter.courseId = this.courseId
        courseChapter.addChapter(this.chapter)
          .then(response =>{
            //关闭弹框
            this.dialogFormVisible = false

            //提示信息
            this.$message({
                        type: 'success',
                        message: '添加章节信息成功!'
            });
            
            this.chapter.courseId = ''
            //刷新页面
            this.getChapter(this.courseId)
          })
      },

      //弹出添加章节的页面
      openDoglogForm(){
        this.dialogFormVisible = true
        //清空表单
        this.chapter.title=''
        this.chapter.sort=''
      },

      //编辑章节
      editChapter(chapterId){
        //弹框
        this.dialogFormVisible = true
        //数据回显
        courseChapter.getChapterInfo(chapterId)
          .then(response =>{
            this.chapter = response.data.chapter
          })
      },

      //删除章节
      removeChapter(chapterId){
         this.$confirm('此操作将删除该章节, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {//确定删除
                courseChapter.deleteChapter(chapterId)
                .then(response =>{//删除成功
                    //提示删除成功
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //刷新页面
                    this.getChapter(this.courseId)
                })
                .catch(error =>{//删除失败
                    this.$message({
                        type: 'error',
                        message: '删除失败!'
                    });
                })
            
            }).catch(() => {//取消删除
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
      },


      //==================================小节操作=======================================
      //打开添加小节
      openVideoForm(chapterId){
        this.diaVideoFormVisible = true

        //清空数据
        this.video={
          title:'',
          sort:0,
          free:0,
          videoSourceId:''
        }


        //设置章节id
        this.video.chapterId = chapterId

        //设置课程id
        this.video.courseId = this.courseId
      },

      //添加小节
      addVideo(){
        courseVideo.addVideo(this.video)
          .then(response =>{
            //关闭弹框
            this.diaVideoFormVisible = false

            //提示信息
            this.$message({
                        type: 'success',
                        message: '添加小节信息成功!'
            });

            //刷新页面
            this.getChapter(this.courseId)
          })
      },

      //保存
      saveOrUpdateVideo(){
        if(!this.video.id){
          this.addVideo()
        }else{
          this.updateVideo(this.video)
        }
      },

      //删除小节
      removeVideo(id){
        this.$confirm('此操作将删除该小节, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {//确定删除
                courseVideo.deleteChapter(id)
                .then(response =>{//删除成功
                    //提示删除成功
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //刷新页面
                    this.getChapter(this.courseId)
                })
                .catch(error =>{//删除失败
                    this.$message({
                        type: 'error',
                        message: '删除失败!'
                    });
                })
            
            }).catch(() => {//取消删除
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
      },

      //编辑小节
      editVideo(id){
        //弹框
        this.diaVideoFormVisible = true
        //数据回显
        courseVideo.getVideoInfo(id)
          .then(response =>{
            this.video = response.data.studyVideo
          })
      },

      //更新小节
      updateVideo(video){
        courseVideo.updateVideo(video)
          .then(response =>{
            //关闭弹框
            this.diaVideoFormVisible = false

            //提示信息
            this.$message({
                        type: 'success',
                        message: '修改小节信息成功!'
            });

            //刷新页面
            this.getChapter(this.courseId)
          })
      }
    }
  }
</script>

<style scoped>
  .chanpterList{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .chanpterList li{
    position: relative;
  }
  .chanpterList p{
    /* float: left; */
    font-size: 20px;
    margin: 10px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #DDD;
  }
  .chanpterList .acts {
    float: right;
    font-size: 14px;
  }

  .videoList{
    padding-left: 50px;
  }
  .videoList p{
    /* float: left; */
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #DDD;
  }

  .videoList .acts{
    float: right;
    font-size: 14px;
  }

</style>